<template>
  <baseEchart :chart-data="barData" :get-option="getOption"></baseEchart>
</template>

<script setup lang="ts">
  const props = defineProps({
    barData: {
      type: Array,
      default: () => []
    }
  })
  const getOption = (chartdata) => {
    const category = chartdata.map((item)=> item.name )
    const categoryData = chartdata.map((item)=> item.value )
    const option = {
      grid: {
        left: "5%",
        right: "5%",
        top: "30%",
        bottom: "5%",
        containLabel: true,
      },
      tooltip: {},
      xAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: "#42A4FF",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "white",
        },
        data: category,
      },
      yAxis: {
        name: "个",
        nameTextStyle: {
          color: "white",
          fontSize: 13,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#42A4FF",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#42A4FF",
          },
        },
        axisLabel: {
          color: "white",
        },
      },
      series: [
        {
          name: "销量",
          type: "bar",
          barWidth: 17,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#01B1FF", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#033BFF", // 100% 处的颜色
                },
              ],
            },
          },
          data: categoryData,
        },
      ],
    };
    return option
  }
</script>